<template>
  <div class="admin-page page-view">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="list">
        <div class="home-icon">
          <i class="iconfont icon-home"></i>
        </div>
        <div class="item">
          <router-link to="/">
            <span class="text">首页</span>
          </router-link>
        </div>
        <div class="seperate">
          <i class="iconfont icon-arrow-right-thin"></i>
        </div>
        <div class="item">
          <span class="text">管理员管理</span>
        </div>
      </div>
      <h1 class="page-title">管理员管理</h1>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <button class="v-button primary" @click="handleAddAdmin">
        <i class="iconfont icon-add"></i> 添加管理员
      </button>

      <!-- 搜索框 -->
      <div class="search-wrapper">
        <div class="search-input">
          <i class="iconfont icon-search"></i>
          <input v-model="searchQuery" placeholder="搜索用户名/手机号" @keyup.enter="handleSearch" />
          <i v-if="searchQuery" class="iconfont icon-close" @click="handleSearchClear"></i>
        </div>
      </div>
    </div>

    <!-- 筛选条件 -->
    <div class="filter-bar">
      <!-- 管理员没有版本概念，已移除版本选择 -->
    </div>

    <!-- 数据表格 -->
    <div class="data-table">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>状态</th>
            <th>权限</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="admin in paginatedUsers" :key="admin.id">
            <td>{{ admin.id }}</td>
            <td>{{ admin.username }}</td>
            <td>{{ admin.mobile }}</td>
            <td>
              <span class="status-badge" :class="admin.status === '1' ? 'active' : 'inactive'">
                {{ admin.status === '1' ? '正常' : '禁用' }}
              </span>
            </td>
            <td>
              <span class="permission-badge" :class="`permission-${admin.permission}`">
                {{ admin.permission === 'superadmin' ? '超级管理员' : '超管助理' }}
                <span v-if="admin.permission === 'superadmin'" class="superadmin-mark">✪</span>
              </span>
            </td>
            <td>{{ formatDate(admin.create_time * 1000) }}</td>
            <td class="control">
              <button @click="handleEditAdmin(admin)" class="v-button"
                :disabled="admin.permission === 'superadmin' || !canEditAdmin(admin)"
                :title="admin.permission === 'superadmin' ? '超级管理员禁止修改' : !canEditAdmin(admin) ? '您没有权限编辑此管理员' : ''">
                <i class="iconfont icon-edit"></i> 编辑
              </button>
              <button class="v-btn danger" @click="confirmDelete(admin)"
                :disabled="admin.permission === 'superadmin' || !canDeleteAdmin(admin)"
                :title="admin.permission === 'superadmin' ? '超级管理员禁止删除' : !canDeleteAdmin(admin) ? '您没有权限删除此管理员' : ''">
                <i class="iconfont icon-delete"></i> 删除
              </button>
              <button class="v-btn" @click="confirmToggleStatus(admin)"
                :disabled="admin.permission === 'superadmin' || !canEditAdmin(admin)"
                :title="admin.permission === 'superadmin' ? '超级管理员禁止修改状态' : !canEditAdmin(admin) ? '您没有权限修改此管理员状态' : ''">
                <i class="iconfont icon-switch"></i> {{ admin.status === '1' ? '禁用' : '启用' }}
              </button>
            </td>
          </tr>
          <tr v-if="loading">
            <td colspan="6" class="loading">加载中...</td>
          </tr>
          <tr v-else-if="filteredUsers.length === 0">
            <td colspan="6" class="empty-row">
              <i class="iconfont icon-empty"></i>
              <p>暂无数据</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="totalPages > 0 && !loading">
      <div class="page-info">
        共 {{ totalCount }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页
      </div>
      <div class="v-pagination">
        <button class="v-button" :disabled="currentPage === 1" @click="handlePageChange(1)">
          首页
        </button>
        <button class="v-button" :disabled="currentPage === 1" @click="handlePageChange(currentPage - 1)">
          上一页
        </button>
        <button v-for="page in visiblePages" :key="page" class="v-button" :class="{ active: currentPage === page }"
          @click="handlePageChange(page)">
          {{ page }}
        </button>
        <button class="v-button" :disabled="currentPage === totalPages" @click="handlePageChange(currentPage + 1)">
          下一页
        </button>
        <button class="v-button" :disabled="currentPage === totalPages" @click="handlePageChange(totalPages)">
          末页
        </button>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <vPopup v-model="showModal" :title="isEdit ? '编辑管理员' : '添加管理员'" confirm-text="确定" width="800px" :async-confirm="true"
      @confirm="handleSubmit" :custom-styles="popupCustomStyles" :keep-open-on-error="true"
      :keep-open-after-confirm="true">
      <div class="v-form double-col">
        <!-- 用户名和手机号 -->
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input v-model="formData.username" class="form-input" placeholder="请输入用户名" :disabled="isEdit" />
        </div>
        <div class="form-group">
          <label class="form-label">手机号</label>
          <input v-model="formData.mobile" class="form-input" placeholder="请输入手机号" type="tel" />
        </div>

        <!-- 用户类型和职位 -->
        <div class="form-group" v-if="!isEdit">
          <label class="form-label">管理员类型</label>
          <BaseSelect v-model="formData.permission" :options="availablePermissionOptions" placeholder="请选择管理员类型"
            :disabled="!canChangePermission" />
        </div>
        <div class="form-group">
          <label class="form-label">职位</label>
          <BaseSelect
                v-model="formData.position"
                :options="availablePositionOptions"
                placeholder="请选择职位"
              />
        </div>

        <!-- 密码或重置密码 -->
        <div class="form-group" v-if="!isEdit || resetPassword">
          <label class="form-label">密码</label>
          <input v-model="formData.password" class="form-input" placeholder="密码长度8-20位，包含字母和数字" type="password" />
        </div>
        <div class="form-group" v-if="isEdit && !resetPassword">
          <label class="form-label">重置密码</label>
          <button @click="resetPassword = true" class="v-btn">
            <i class="iconfont icon-refresh"></i> 点击重置密码
          </button>
        </div>

        <!-- 状态 -->
        <div class="form-group">
          <label class="form-label">状态</label>
          <div class="toggle-wrapper">
            <vToggle v-model="formData.status" />
            <span class="toggle-label">{{ formData.status ? '启用' : '禁用' }}</span>
          </div>
        </div>
      </div>
    </vPopup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { get, post } from "@/utils/request";
import { formatDate } from "@/utils/date";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
import BaseSelect from '@/components/BaseSelect.vue';
import { getPermission, getCompanyId, getPosition, getUserInfo } from '@/utils/auth';

// 数据
const userList = ref([]);
const loading = ref(false);
const searchQuery = ref("");
const statusFilter = ref("");
const adminTypeFilter = ref("");

// 直接使用后端返回的用户列表
const filteredUsers = ref([]);

// 弹窗相关
const showModal = ref(false);
const isEdit = ref(false);
const editLoading = ref(false);
const resetPassword = ref(false);
const formData = ref({
  id: '',
  username: '',
  mobile: '',
  permission: 'assistant',
  position: '',
  password: '',
  status: 1
});

// 当前用户信息
const currentUserPermission = computed(() => getPermission());
const currentUserCompanyId = computed(() => getCompanyId());
const currentUserPosition = computed(() => getPosition());

// 弹窗自定义样式 - 解决Teleport导致的scoped样式无法应用问题
const popupCustomStyles = computed(() => ({
  '--form-row-display': 'flex',
  '--form-row-gap': '20px',
  '--form-row-width': '100%',
  '--form-half-width': 'calc(50% - 10px)',
  '--form-padding': '0 10px',
  '--form-group-display': 'flex',
  '--form-group-direction': 'column'
}));

// 下拉选项 - 管理员权限分为超级管理员和超管助理
const permissionOptions = [
  { value: 'superadmin', text: '超级管理员' },
  { value: 'assistant', text: '超管助理' }
];

// 管理员类型选项
const adminTypeOptions = [
  { value: 'superadmin', text: '超级管理员' },
  { value: 'assistant', text: '超管助理' }
];

// 从API获取的职位列表
const positionList = ref([]);

// 获取职位列表
const fetchPositions = async () => {
  try {
    const res = await get('/position/all');
    if (res.code === 200) {
      positionList.value = res.data;
    }
  } catch (error) {
    console.error('获取职位列表失败:', error);
  }
};

// 职位选项 - 从API获取后使用，如果API获取失败则使用默认值
const positionOptions = ref([
  { value: '', text: '无' },
  { value: '拍摄主管', text: '拍摄主管' },
  { value: '后期主管', text: '后期主管' },
  { value: '市场主管', text: '市场主管' },
  { value: '摄影师', text: '摄影师' },
  { value: '录像师', text: '录像师' },
  { value: '照片修图师', text: '照片修图师' },
  { value: '视频剪辑师', text: '视频剪辑师' },
  { value: '市场运营', text: '市场运营' },
  { value: '市场销售', text: '市场销售' },
  { value: '售后客服', text: '售后客服' }
]);

// 根据当前用户权限和职位过滤可选择的权限选项
const availablePermissionOptions = computed(() => {
  if (currentUserPermission.value === 'superadmin') {
    return permissionOptions;
  } else {
    // 非超级管理员只能创建普通管理员
    return permissionOptions.filter(option => option.value === 'admin');
  }
});

// 判断是否可以修改用户权限
const canChangePermission = computed(() => {
  // 超级管理员可以修改所有用户的权限
  if (currentUserPermission.value === 'superadmin') {
    return true;
  }
  // 其他用户不能修改权限
  return false;
});

// 管理员没有所属公司概念，已移除相关逻辑

// 根据当前用户职位过滤可选择的职位选项
const availablePositionOptions = computed(() => {
  // 使用从API获取的职位列表，如果为空则使用默认职位列表
  const positions = positionList.value.length > 0 ? positionList.value : positionOptions.value;
  
  if (currentUserPermission.value === 'superadmin') {
    return positions;
  } else {
    // 非超级管理员只能创建特定职位的管理员
    if (currentUserPosition.value === '拍摄主管') {
      return positions.filter(option =>
        ['摄影师', '录像师'].includes(option.text)
      );
    } else if (currentUserPosition.value === '后期主管') {
      return positions.filter(option =>
        ['照片修图师', '视频剪辑师'].includes(option.text)
      );
    } else if (currentUserPosition.value === '市场主管') {
      return positions.filter(option =>
        ['市场运营', '市场销售', '售后客服'].includes(option.text)
      );
    }
    return positions.filter(option => option.value === '');
  }
});

const statusOptions = [
  { value: 1, text: '启用' },
  { value: 0, text: '禁用' }
];

// 分页
const currentPage = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);
const totalPages = ref(0);
const maxVisible = ref(5);

// 分页后的用户列表
const paginatedUsers = computed(() => {
  return userList.value;
});

// 计算可见页码
const visiblePages = computed(() => {
  const pages = [];
  const half = Math.floor(maxVisible.value / 2);
  let start = currentPage.value - half;
  let end = currentPage.value + half;

  if (start < 1) {
    start = 1;
    end = Math.min(maxVisible.value, totalPages.value);
  }

  if (end > totalPages.value) {
    end = totalPages.value;
    start = Math.max(1, end - maxVisible.value + 1);
  }

  for (let i = start; i <= end; i++) {
    pages.push(i);
  }

  return pages;
});

// 获取管理员列表
const fetchAdmins = async () => {
    loading.value = true;
    try {
      const params = {
        page: currentPage.value,
        pageSize: pageSize.value
      };

    if (searchQuery.value) {
      params.keyword = searchQuery.value;
    }

    if (statusFilter.value !== "") {
      params.status = statusFilter.value;
    }

    if (adminTypeFilter.value !== "") {
      params.permission = adminTypeFilter.value;
    }

    // 使用新的adminList接口
    const res = await get("/user/adminList", params);

    if (res.code === 200) {
      userList.value = res.data.list;
      totalCount.value = res.data.pagination.total;
      totalPages.value = res.data.pagination.totalPages;
      filteredUsers.value = res.data.list;
    }
  } catch (error) {
    vToast.error("获取管理员列表失败");
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 版本选择已移除，相关函数已注释

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchAdmins();
};

// 清空搜索
const handleSearchClear = () => {
  searchQuery.value = "";
  currentPage.value = 1;
  fetchAdmins();
};

// 筛选
const handleFilter = () => {
  currentPage.value = 1;
  fetchAdmins();
};

// 分页
const handlePageChange = (page) => {
  if (page < 1 || page > totalPages.value || page === currentPage.value) {
    return;
  }
  currentPage.value = page;
  fetchAdmins();
};

// 删除确认
const confirmDelete = (admin) => {
  // 检查是否有权限删除该管理员
  if (!canDeleteAdmin(admin)) {
    vToast.error("您没有权限删除此管理员");
    return;
  }

  vConfirm({
    message: `确定要删除管理员【${admin.username}】吗？`,
    onConfirm: () => deleteAdmin(admin.id),
  });
};

// 删除管理员
const deleteAdmin = async (id) => {
  try {
    const res = await post("/user/delete", { id });

    if (res.code === 200) {
      vToast.success("管理员删除成功");
      fetchAdmins();
    } else {
      vToast.error(res.msg || "删除失败");
    }
  } catch (error) {
    vToast.error("删除失败");
    console.error(error);
  }
};

// 检查是否有权限添加管理员
const canAddAdmin = computed(() => {
  // 只有超级管理员可以添加管理员
  return currentUserPermission.value === 'superadmin';
});

// 打开添加管理员弹窗
const handleAddAdmin = async () => {
  if (!canAddAdmin.value) {
    vToast.error("您没有权限添加管理员");
    return;
  }

  // 获取职位列表
  await fetchPositions();

  isEdit.value = false;
  resetPassword.value = false;
  formData.value = {
    id: '',
    username: '',
    mobile: '',
    permission: currentUserPermission.value === 'superadmin' ? 'assistant' : 'assistant',
    position: '',
    password: '',
    status: 1
  };
  showModal.value = true;
};

// 打开编辑管理员弹窗
const handleEditAdmin = async (admin) => {
  // 检查是否有权限编辑该管理员
  if (!canEditAdmin(admin) || currentUserPermission.value === 'member') {
    vToast.error("您没有权限编辑此管理员");
    return;
  }

  isEdit.value = true;
  resetPassword.value = false;
  editLoading.value = true;
  try {
    const res = await get("/user/detail", { id: admin.id });
    if (res.code === 200) {
      formData.value = {
        ...res.data,
        status: Number(res.data.status),
        position: res.data.position || ''
      };
      showModal.value = true;
    } else {
      vToast.error(res.msg || "获取管理员详情失败");
    }
  } catch (error) {
    vToast.error("获取管理员详情失败");
    console.error(error);
  } finally {
    editLoading.value = false;
  }
};

// 检查是否有权限编辑管理员
const canEditAdmin = (admin) => {
  // 超级管理员可以编辑所有管理员
  if (currentUserPermission.value === 'superadmin') {
    return true;
  }

  // 管理员没有所属公司概念
  // 超管助理不能编辑管理员
  return false;
};

// 检查是否有权限删除管理员
const canDeleteAdmin = (admin) => {
  // 超级管理员可以删除所有管理员（除了自己）
  if (currentUserPermission.value === 'superadmin') {
    return admin.id !== getUserInfo()?.id;
  }

  // 超管助理不能删除管理员
  return false;
};

// 切换管理员状态确认
const confirmToggleStatus = (admin) => {
  // 检查是否有权限修改该管理员状态
  if (!canEditAdmin(admin)) {
    vToast.error("您没有权限修改此管理员状态");
    return;
  }

  const action = admin.status === '1' ? '禁用' : '启用';
  vConfirm({
    message: `确定要${action}管理员【${admin.username}】吗？`,
    onConfirm: () => toggleStatus(admin),
  });
};

// 切换管理员状态
const toggleStatus = async (admin) => {
  try {
    const res = await post("/user/update", {
      id: admin.id,
      status: admin.status === '1' ? 0 : 1,
    });

    if (res.code === 200) {
      vToast.success(`管理员${admin.status === '1' ? '禁用' : '启用'}成功`);
      fetchAdmins();
    } else {
      vToast.error(res.msg || "操作失败");
    }
  } catch (error) {
    vToast.error("操作失败");
    console.error(error);
  }
};

// 表单提交
const handleSubmit = async () => {
  // 表单验证
  if (!formData.value.username) {
    vToast.error("用户名不能为空");
    return;
  }

  if (!formData.value.mobile) {
    vToast.error("手机号不能为空");
    return;
  }

  const mobileRegex = /^1[3-9]\d{9}$/;
  if (!mobileRegex.test(formData.value.mobile)) {
    vToast.error("请输入正确的手机号");
    return;
  }

  if (!isEdit.value && !formData.value.password) {
    vToast.error("密码不能为空");
    return;
  }

  // 检查是否是超级管理员
  if (isEdit.value && formData.value.permission === 'superadmin') {
    vToast.error("超级管理员不能通过此方式修改，请使用专用通道");
    return;
  }

  editLoading.value = true;
  try {
    // 确保status是数字类型（1或0）而不是布尔值
    const submitData = {
      ...formData.value,
      status: formData.value.status ? 1 : 0
    };

    // 根据是编辑还是添加管理员，调用不同的API接口
    const res = isEdit.value ?
      await post("/user/update", submitData) :
      await post("/user/create", submitData);

    if (res.code === 200) {
      vToast.success(isEdit.value ? "管理员更新成功" : "管理员添加成功");
      showModal.value = false;
      fetchAdmins();
    } else {
      // 错误时不关闭弹窗
      vToast.error(res.msg || "操作失败");
    }
  } catch (error) {
    // 错误时不关闭弹窗
    vToast.error(error);
    console.error(error);
  } finally {
    editLoading.value = false;
  }
};

// 初始化加载数据
onMounted(() => {
  // 检查是否有权限访问此页面
  if (currentUserPermission.value !== 'superadmin') {
    vToast.error("您没有权限访问此页面");
    // 重定向到用户管理页面
    const router = useRouter();
    router.push('/user');
    return;
  }

  fetchAdmins();
});

// 导入useRouter
import { useRouter } from 'vue-router';
</script>

<style scoped lang="less">
.admin-page {
  .breadcrumb {
    margin-bottom: 20px;

    .list {
      display: flex;
      align-items: center;
      font-size: 14px;

      .home-icon {
        color: #999;
      }

      .item {
        margin-right: 8px;

        .text {
          color: #333;

          &:hover {
            color: var(--v-theme);
          }
        }
      }

      .seperate {
        margin-right: 8px;
        color: #999;
      }
    }

    .page-title {
      margin-top: 10px;
      font-size: 24px;
      font-weight: 500;
      color: #333;
    }
  }

  .action-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;

    .search-wrapper {
      flex: 1;
      max-width: 300px;
      margin-left: auto;

      .search-input {
        position: relative;
        display: flex;
        align-items: center;
        background: var(--v-card-bg);
        border-radius: var(--v-card-radius);
        border: 1px solid var(--v-border-color);
        padding: 0 10px;
        height: 36px;

        i {
          color: var(--v-text-light);
          margin-right: 8px;
        }

        input {
          flex: 1;
          border: none;
          background: transparent;
          outline: none;
          color: var(--v-text);

          &::placeholder {
            color: var(--v-text-light);
          }
        }

        .icon-close {
          cursor: pointer;
          margin-left: 8px;

          &:hover {
            color: var(--v-danger);
          }
        }
      }
    }
  }

  .filter-bar {
    margin-bottom: 20px;
  }

  .tab-group {
    display: flex;
    align-items: center;
    gap: 2px;
    background-color: var(--v-border-color);
    padding: 2px;
    border-radius: var(--v-card-radius);
  }

  .tab-button {
    padding: 8px 20px;
    background: var(--v-card-bg);
    border: none;
    border-radius: var(--v-card-radius);
    color: var(--v-text);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;

    &:hover {
      background: var(--v-hover-bg);
    }

    &.active {
      background: var(--v-theme);
      color: white;
    }
  }

  .data-table {
    background: var(--v-card-bg);
    border-radius: var(--v-card-radius);
    overflow: hidden;
    margin-bottom: 20px;

    table {
      width: 100%;
      border-collapse: collapse;

      thead {
        background: var(--v-table-header-bg);

        th {
          padding: 12px 16px;
          text-align: left;
          font-weight: 500;
          color: var(--v-text);
          border-bottom: 1px solid var(--v-border-color);
        }
      }

      tbody {
        tr {
          border-bottom: 1px solid var(--v-border-color);

          &:last-child {
            border-bottom: none;
          }

          td {
            padding: 12px 16px;
            color: var(--v-text);
          }
        }
      }

      .loading,
      .empty-row {
        text-align: center;
        padding: 40px;
        color: var(--v-text-light);
      }

      .empty-row {
        .iconfont {
          font-size: 48px;
          margin-bottom: 10px;
          display: block;
        }
      }

      .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;

        &.active {
          background-color: rgba(40, 199, 111, 0.1);
          color: var(--v-success);
        }

        &.inactive {
          background-color: rgba(234, 84, 85, 0.1);
          color: var(--v-danger);
        }
      }

      /* 权限徽章样式 */
      .permission-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
      }

      .permission-badge.permission-superadmin {
        background-color: rgba(230, 162, 60, 0.1);
        color: #e6a23c;
      }

      .permission-badge.permission-admin {
        background-color: rgba(51, 153, 255, 0.1);
        color: #3399ff;
      }

      .permission-badge.permission-member {
        background-color: rgba(40, 199, 111, 0.1);
        color: var(--v-success);
      }

      /* 超级管理员标识样式 */
      .superadmin-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        color: #e6a23c;
      }

      .superadmin-mark {
        color: #e6a23c;
        font-size: 16px;
        animation: twinkle 2s infinite;
      }

      @keyframes twinkle {

        0%,
        100% {
          opacity: 0.5;
        }

        50% {
          opacity: 1;
        }
      }

      .control {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* 使用main.less中定义的统一按钮样式 */
    }
  }

  /* 确保表单在弹窗中正常显示 */
  .admin-page .v-form {
    padding: 0 10px;
    width: 100%;
  }

  /* 确保表单元素正确显示 */
  .admin-page .v-form .form-group {
    margin-bottom: 0;
  }

  .admin-page .v-form .form-input {
    width: 100%;
    box-sizing: border-box;
  }

  .pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .page-info {
      color: var(--v-text-light);
      font-size: 14px;
    }

    .v-pagination {
      display: flex;
      gap: 8px;

      .v-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;

        &[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }

        &.active {
          background: var(--v-theme);
          color: white;
        }
      }
    }
  }
}
</style>